<template>
  <div style="height:100%">
    <RouteView v-if="!reloadRouterView && !computedURL"
               :spin="true" />
    <page-card :title="computedTitle"
               v-if="computedURL"
               class="layout-page-card">
      <a-spin :spinning="iframeLoading"
              style="height: 100%"
              wrapperClassName="ggg">
        <iframe :src="computedURL"
                class="view-iframe"
                scrolling="auto"
                frameborder="0"
                ref="iframe"
                height="100%"
                @load="iframeLoading = false">
        </iframe>
      </a-spin>
    </page-card>
  </div>
</template>

<script>

import { ZRouteView } from '@zh/components-ant'
import storage from '@zh/common-utils/utils/storage'

export default {
  components: { RouteView: ZRouteView },
  props: {
    reloadRouterView: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      page: {},
      iframeLoading: false
    }
  },
  computed: {
    computedURL () {
      let url = this.page?.path
      if (!url) {
        return false
      }
      if (url.indexOf('?') != -1) {
        url = url + '&'
      } else {
        url = url + '?'
      }
      url = `${url}token=${storage.getToken().value}`
      return url
    },
    computedTitle () {
      return this.page?.meta?.title
    }
  },
  watch: {
    reloadRouterView () { }
  },
  methods: {
    reload () {
      this.$router.reload()
    },
    openInIframe (page) {
      this.page = page
      this.iframeLoading = true
      // const current = this.pages.find(p => p.name == page.name)
      // if (!current) {
      //   this.pages.push(page)
      // }
      // this.onTabChange(page)
    },
    closeIframe () {
      this.page = {}
    }
  }
}
</script>

<style lang="less" scoped>
.view-iframe {
  width: 100%;
  overflow: hidden;
}
.layout-page-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  > ::v-deep .ant-card-body {
    flex: auto;
    padding: 1px 0px 0px 0px;
  }
  .ant-spin-nested-loading,
  ::v-deep .ant-spin-container {
    height: 100%;
  }
}
</style>